import React, { useEffect, useState } from 'react'

import { Row, Col, Card, Tree, Tag, Pagination, Table } from "antd";

import type { DataNode } from 'antd/es/tree';

import { useParams } from 'react-router-dom';

// 请求
import {
  hosScheduleListRequest,
  hosScheduleRuleRequest
} from '@/api/hospital/hospitalListSet'
// 类型
import type {
  hosDepartmentListType,
  bookingScheduleListType
} from '@/api/hospital/model/hospitalListTypes'

export default function HospitalCheck() {

  const { hoscode } = useParams()

  // console.log(hoscode);
  //某科室科目 
  const [tableData, setTableData] = useState<hosDepartmentListType>([])
  //某科室具体时间
  const [hospitalDate, setHospitalDate] = useState<bookingScheduleListType>([])
  //当前页
  const [page, setPage] = useState(1)
  //限制页
  const [limit, setLimt] = useState(3)
  //总页数
  const [total, setTotal] = useState(0)

  //初始化获取数据
  useEffect(() => {
    (async () => {
      const result = await hosScheduleListRequest(hoscode as string)
      console.log(result);
      //把获取到的数据设置给state
      setTableData(result)
    })()
  }, [])

  //医院某个时间的请求
  useEffect(() => {
    const getScheduleRule = async () => {
      const result = await hosScheduleRuleRequest({
        page: page,
        limit: limit,
        hoscode: "1000_0",
        depcode: "200040878",
      });
      // console.log(result);
      //设置某科室具体时间
      setHospitalDate(result.bookingScheduleList)
      //设置总页数
      setTotal(result.total)
    };
    getScheduleRule();
  }, [page, limit]);

  //事件函数
  const changePage = (page: number, pageSize: number) => {
    //第几页
    setPage(page)
    //每页条数
    setLimt(pageSize)
  }


  // //树形数据
  // const treeData: DataNode[] = [
  //   {
  //     title: 'parent 1',
  //     key: '0-0',
  //     children: [
  //       {
  //         title: 'parent 1-0',
  //         key: '0-0-0',
  //         // disabled: true,
  //         children: [
  //           {
  //             title: 'leaf',
  //             key: '0-0-0-0',
  //             // disableCheckbox: true,
  //           },
  //           {
  //             title: 'leaf',
  //             key: '0-0-0-1',
  //           },
  //         ],
  //       },
  //       {
  //         title: 'parent 1-1',
  //         key: '0-0-1',
  //         children: [
  //           { title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }
  //         ],
  //       },
  //     ],
  //   },
  // ];
  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "号源时间",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "可预约数",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "挂号费用",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "擅长技能",
      dataIndex: "address",
      key: "address",
    },
  ];

  //样式
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };

  return (
    <div>
      <Card>
        <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
        <Row gutter={20}>
          <Col span={5}>
            <div>
              <Tree
                treeData={tableData as []}
                fieldNames={{ title: "depname", key: "depcode" }}
                expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
                style={treeStyle} />
            </div>
          </Col>
          <Col span={19} >

            <div style={{ marginBottom: "20px" }}>
              {
                hospitalDate.map(item =>
                  <Tag key={item.workDate}>
                    <p>{item.workDate}</p>
                    <p>{item.availableNumber}/{item.reservedNumber}</p>
                  </Tag>
                )
              }
            </div>

            <Pagination
              // 页码的配置：当前的页码
              current={page}
              // 总数据的数量
              total={15}
              // 每页条数
              pageSize={limit}
              // 展示更改每页条数的选项（默认total大于条的时候开启）
              pageSizeOptions={[3, 6, 9, 15]}
              // 是否直接开启更新每页条数的选项
              showSizeChanger={true}
              onChange={changePage}
              style={{ marginBottom: "20px" }}
            />
            <Table
              columns={columns}
            />;
          </Col>
        </Row>
      </Card>

    </div>
  )
}
